<template>
  <el-dialog v-model="isShow" draggable width="720" :close-on-click-modal="false">
    <template #header>
      {{ data.title }}
    </template>
    <el-form :model="data">
      <div class="form-item-row">
        <el-form-item label="用户名称" :label-width="sLabel[0]">
          <el-input
            v-model="data.name"
            :disabled="data.flag == 'del'"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-tag
            :type="formatStatus(data.status,'icon')"
            style="margin: 0 5px"
            v-if="data.flag != 'add'"
            >{{formatStatus(data.status,'text')}}</el-tag
          >
        </el-form-item>
        <el-form-item
          label="用户类型"
          :label-width="sLabel[1]"
          style="width: 215px"
          v-if="data.flag != 'add'"
        >
           <span class="label">{{ data.type }}</span>
        </el-form-item>
      </div>
      <div class="form-item-row">
        <el-form-item label="联系人" :label-width="sLabel[0]">
          <el-input
            v-model="data.contact"
            autocomplete="off"
            :disabled="data.flag == 'del'"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="sLabel[1]">
          <el-input
            v-model="data.phone"
            autocomplete="off"
            :disabled="data.flag == 'del'"
          ></el-input>
        </el-form-item>
      </div>
      <el-form-item label="省市区" :label-width="sLabel[0]">
        <el-cascader
          v-model="data.regionInfo"
          :options="regionOptions"
          :props="hover"
          placeholder="选择省市区"
          @change="regionChange"
          :disabled="data.flag == 'del'"
        />
      </el-form-item>
      <el-form-item label="地址" :label-width="sLabel[0]">
        {{data.address.province}}{{data.address.city}}{{data.address.district}}
        <el-input
          v-model="data.address.addr"
          autocomplete="off"
          :style="'width:' + sLabel[2]"
          :disabled="data.flag == 'del'"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="备注" :label-width="sLabel[0]">
        <el-input
          v-model="data.notes"
          autocomplete="off"
          :style="'width:' + sLabel[2]"
          :disabled="data.flag == 'del'"
        ></el-input>
      </el-form-item> -->
      <div class="form-item-row" v-if="data.dtCreate != ''">
        <el-form-item label="创建时间" :label-width="sLabel[0]">
          <span class="label">{{ data.dtCreate }}</span>
        </el-form-item>
        <el-form-item label="操作员" :label-width="sLabel[1]" v-if="data.operCreate != ''">
          <span class="label">{{ data.operCreate }}</span>
        </el-form-item>
      </div>
      <div class="form-item-row" v-if="data.dtUpdate != ''">
        <el-form-item label="修改时间" :label-width="sLabel[0]">
          <span class="label">{{ data.dtUpdate }}</span>
        </el-form-item>
        <el-form-item label="操作员" :label-width="sLabel[1]">
          <span class="label">{{ data.operUpdate }}</span>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div>
        <el-button @click="close()">取 消</el-button>
        <el-button v-if="data.flag == 'del'" type="danger" @click="msgBox('status',data.status == cStatus[0]?'停用此用户':'取消停用')">{{
          data.status == cStatus[0] ? "停 用" : "取消停用"
        }}</el-button>
        <el-button v-else type="primary" @click="done()" :loading="loading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, ref } from "vue-demi";
import http from "@/axios/http";
import util from "@/assets/js/util";
import { regionData, codeToText } from "element-china-area-data";
import { ElNotification,ElMessageBox } from "element-plus";
import mqtt from '@/assets/js/mqtt';
export default {
  setup(props, ctx) {
    const Global = getCurrentInstance().proxy
    let user = reactive({
      id: Global.$var.user.id,
      username: Global.$var.user.username,
      power: Global.$var.user.power,
    });

    function mqttOnMsg() {
      mqtt.onMsg((t,m)=>{
        loading.value = false
        let r = JSON.parse(m)
        if (r.data.returnCode == 10000) {
          let d = r.data.data
          if (r.msgType == 65 || r.msgType == 66) {
            ctx.emit("done", data);
            isShow.value = false;
          }
          if (r.msgType == 60) {
          //console.log(d)
          }
        }
      })
    }

    let cStatus = ref(Global.$const.STATUS_DATA);
    let sLabel = ref(["150px", "80px", "450px"]);
    let regionOptions = ref(regionData);
    function regionChange() {
      data.address.province = codeToText[data.regionInfo[0]]
      data.address.city = codeToText[data.regionInfo[1]]
      data.address.district = codeToText[data.regionInfo[2]]
    }
    let isShow = ref(false);
    let data = reactive({
      flag: "",
      title: "",
      id: "",
      name: "",
      status: 0,
      group:"",
      notes: "",
      scope: "",
      contact: "",
      type:"",
      phone: "",
      regionInfo: "",
      address: {province: '',city: '',district: '',addr: ''},
      dtCreate: "",
      operCreate: "",
      dtUpdate: "",
      operUpdate: "",
    });
    let loading = ref(false)
    function open(d) {
      mqttOnMsg()
      data.flag = d.flag;
      if (d.flag == "add") {
        data.title = "新建用户";
        data.id = "";
        data.name = "";
        data.status = 0;
        data.group = "";
        data.notes = "";
        data.scope = "";
        data.type = "";
        data.contact = "";
        data.phone = "";
        data.regionInfo = "";
        data.address.province = ''
        data.address.city = ''
        data.address.district = ''
        data.address.addr = ''
        data.dtCreate = "";
        // data.operCreate = "";
        // data.dtUpdate = "";
        // data.operUpdate = "";
      } else {
        data.title = d.flag == "del" ? "用户状态" : "编辑用户";
        data.id = d.Id;
        data.name = d.name;
        data.status = d.status;
        data.group = d.group;
        data.notes = d.notes;
        data.scope = d.scope;
        data.type = d.type;
        data.contact = d.contact;
        data.phone = d.phone;
        data.regionInfo = ''
        if (util.isNull(d.address)) {
          data.address.province = ''
          data.address.city = ''
          data.address.district = ''
          data.address.addr = ''
        } else {
          data.address.province = d.address.province || ''
          data.address.city = d.address.city || ''
          data.address.district = d.address.district || ''
          data.address.addr = d.address.addr || ''
        }
        data.dtCreate = d.dtCreate;
        // data.operCreate = d.operCreate;
        // data.dtUpdate = d.dtUpdate;
        // data.operUpdate = d.operUpdate;
        getClientById(d.Id)
      }
      isShow.value = true;
    }
    function close() {
      isShow.value = false;
    }
    async function done() {
      let err = ''
      // if (util.isNull(data.model)) err = '主板型号不能为空'
      // else if (util.isNull(factoryValue.value)) err = '主板厂商不能为空'
      if (!util.isNull(err)) {
        ElNotification({
            type: 'warning',
            duration: 1500,
            title: '',
            message: err
          })
        return
      }
      loading.value = true
      if (data.flag == "add" || data.flag == "edit") {
        let msgCode = 65
        if (data.flag == "edit") msgCode = 66
        let topic = mqtt.TOPIC_REQ+msgCode
        let p = {}
        p.msgType = msgCode
        p.clientId = user.id
        p.userName = user.username
        let m = {}
        if (data.flag == "edit") {
          m.Id = data.id
          m.scope = data.scope
        }
        m.name = data.name
        m.group = data.group
        m.notes = data.notes
        m.contact = data.contact
        m.phone = data.phone
        m.address = {}
        if (!util.isNull(data.address)) {
          m.address.province = data.address.province
          m.address.city = data.address.city
          m.address.district = data.address.district
          m.address.addr = data.address.addr
        }
        p.message = {}
        p.message.user = JSON.stringify(m)
        // console.log('修改用户',JSON.stringify(p))
        mqtt.publish(topic,JSON.stringify(p))
      }
      if (data.flag == "del") {
        let s = cStatus.value;
        data.status = data.status == s[0] ? s[1] : s[0];
      }
    }
    // 确认msgBox
    function msgBox(flag,msg,title='是否确认？',cbt='确认') {
      ElMessageBox.confirm(msg, title, {
        confirmButtonText: cbt,
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (flag == 'status') done()
        })
        .catch(() => {});
    }
    // 按Id查询平台用户
    function getClientById(id) {
      let msgCode = 60
        let topic = mqtt.TOPIC_REQ+msgCode
        let p = {}
        p.msgType = msgCode
        p.clientId = user.id
        p.userName = user.username
        let m = {}
        m.id = id
        p.message = m
        // console.log(JSON.stringify(p))
        mqtt.publish(topic,JSON.stringify(p))
    }

    // 状态值转换
    function formatStatus(v,f) {
      let r = ''
      if (f == 'icon') {
        if (v == -1) r = 'danger'
        if (v == 0) r = 'success'
        if (v == 1) r = 'info'
      }
      if (f == 'text') {
        if (v == -1) r = '停用'
        if (v == 0) r = '正常'
        if (v == 1) r = '未知状态'
      }
      return r
    } 

    return {
      user,cStatus,sLabel,regionOptions,regionChange,
      isShow,data,loading,open,close,done,msgBox,
      formatStatus,
    };
  },
};
</script>

<style lang="scss" scoped>
.form-item-row {
  display: flex;
  flex-direction: row;
  .label {
    background-color: $color-primary-away;
    // border: 1px solid $color-primary-light;
    padding: 0px 15px;
    border-radius: 1px;
  }
}
</style>